<template>
  <div class="pane">
    <div>
      <el-table :data="list" border style="width: 600px;" >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="projectDate" label="日期" width="100">
          <template  #default="scope">
              <el-input v-model="scope.row.projectDate" 
                        v-if="scope.row.seen"> </el-input>
              <span style="margin-left: 10px" v-else>{{ scope.row.projectDate }}</span>
            </template>
        </el-table-column>
        <el-table-column prop="plan" label="计划工作完成量" width="150" >
          <template  #default="scope">
              <el-input v-model="scope.row.plan" 
                        v-if="scope.row.seen"> </el-input>
              <span style="margin-left: 10px" v-else>{{ scope.row.plan }}</span>
            </template>
        </el-table-column>
        <el-table-column prop="actual" label="实际工作完成量" width="150" >
          <template  #default="scope">
              <el-input v-model="scope.row.actual" 
                        v-if="scope.row.seen"> </el-input>
              <span style="margin-left: 10px" v-else>{{ scope.row.actual }}</span>
            </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right">
          <template #default="scope" prop="compile">
            <el-button type="primary" size="small" @click="emit(scope.row)">
              {{ scope.row.compile }}
            </el-button>
            <el-button @click="addLine()" type="primary" size="small" class="add-btn">增加</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- <el-button class="mt-4" style="width: 100%" @click="onAddItem"
    >Add Item</el-button
  > -->
      <!-- <el-pagination v-model:currentPage="selectData.pages" :page-size="selectData.pagesizes"
        :page-sizes="[10, 20, 30, 40]" small layout="total, sizes, prev, pager, next, jumper" :total="selectData.count"
        @size-change="sizeChange" @current-change="currentChange" /> -->
    </div>
    <div style="text-align:center;margin-top:18px;">
      <el-button type="primary" @click="handleLastStep()">上一步</el-button>
      <el-button type="primary" @click="complate()">完成</el-button>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs, onMounted, computed } from 'vue'
import { InitData } from '@/type/project'
import { addProcessList } from "@/request/processapi";
import { useRouter } from 'vue-router'
import { List } from 'echarts';
export default defineComponent({
  emits: ["handleLastStep"],
  setup(prop, ctx) {
    const router = useRouter()
    const data = reactive(new InitData())
    //获取数据
    onMounted(() => {
      //addProcess()
    });
    

    const datas = reactive({
        list:[
        {
                       projectDate: '',
                       actual:'',
                       plan:'',
                       compile: '编辑',
                     }]
        
      })
      

    let a = localStorage.getItem('projectId')
    console.log(a);
    
    //分页
    // const dataList = reactive({
    //   comList: computed(() => {
    //     return data.list.slice((data.selectData.pages - 1) * data.selectData.pagesizes, data.selectData.pages * data.selectData.pagesizes);
    //   }),
    // });
    // const currentChange = (pages: number) => {
    //   data.selectData.pages = pages
    // }
    // const sizeChange = (pagesizes: number) => {
    //   data.selectData.pagesizes = pagesizes
    // }
    const emit = (row: any) => {
      row.seen = !row.seen
      if (row.seen) {
        row.compile = '保存'
        row.seen = true
        //addProcess()
      } else {
        row.compile = '编辑'
        row.seen = false
        //addProcess()
        const params: Object = {
        id:'',
        actual:'',
        projectDate: '',
        plan: '',
        projectId: a,
      }
      addProcessList(params).then(res => {
        console.log(res);
        data.list = res.data.records
        data.selectData.count = res.data.records.length
      });
      }
    }
    const addLine=()=>{
      const newLine = {
        projectDate: '',
        plan: "",
        actual: "",
        compile: '编辑',
      }
       datas.list.push(newLine)
      

    }
    const handleLastStep = () => {
      ctx.emit('handleLastStep', { id: '1' })
    }
    const complate = () => {
      router.push('./project')
    }
    return { ...toRefs(data), ...toRefs(datas),  emit, handleLastStep, complate ,addLine,}
  },
  methods: {}
})
</script>
<style scoped>
</style>